﻿<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
        .item {padding:15px 30px 30px;border-bottom:#e7e7e7 1px solid;
            -webkit-box-shadow:0 0 40px rgba(0, 0, 0, 0.1) inset;
            -moz-box-shadow:0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 0 40px rgba(0, 0, 0, 0.1) inset;}
        .elements {margin-top:15px}
        .elements span {cursor:pointer;}        
        body{padding:0px;overflow:hidden}
    </style>
    <script src="jquery-1.7.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.elements span').click(function () {
                var classname = $(this).attr('class');
                parent.oUtil.obj.insertHTML(' <span class="' + classname + '">' + $(this).html() + '</span> ');
            });
        });
    </script>
</head>
<body>

<div class="row-fluid">
    <div class="span12">
        <div class="item">
            <h4>Labels</h4> 
            <div class="elements">
                <span class="label">Default</span> &nbsp;
                <span class="label label-success">Success</span> &nbsp;
                <span class="label label-warning">Warning</span> &nbsp;
                <span class="label label-important">Important</span> &nbsp;
                <span class="label label-info">Info</span> &nbsp;
                <span class="label label-inverse">Inverse</span>
            </div>
        </div>
    </div>
</div>

<div class="row-fluid">
    <div class="span12">
        <div class="item">
            <h4>Badges</h4>
            <div class="elements">
                <span class="badge">Default</span> &nbsp;
                <span class="badge badge-success">Success</span> &nbsp;
                <span class="badge badge-warning">Warning</span> &nbsp;
                <span class="badge badge-important">Important</span> &nbsp;
                <span class="badge badge-info">Info</span> &nbsp;
                <span class="badge badge-inverse">Inverse</span>
            </div>
        </div>
    </div>
</div>

</body>
</html>
